<template>
	<div id="bigDiv">
		<head-2 />
		<div id="bigTitle">颜色判断</div>
		<div id="countDown">
      <span>倒计时<span id="timeNumber">{{ countDwon }}</span
      >s</span>
    </div>
		<div id="contentDiv">
			<div id="waiBu">
				<div id="neirong">
				</div>
			</div>
			<div id="panduan">
				<div id="dui">√</div>
				<div id="cuo">×</div>
			</div>
		</div>
		<div id="GameOver" v-if="isEnd">
            <div id="endTittle">游戏结束</div>
            <div>
                <img src="https://pic2.imgdb.cn/item/644a7a5d0d2dde5777f7ac79.jpg" alt="" />
                <p>正确个数:<span>{{rightCount}}</span> 错误个数:<span>{{leftCount}}</span></p>
            </div>
            <div id="btn">
                <el-button type="success" size="small" @click="onceAgain">再来一次</el-button>
                <el-button type="success" size="small" @click="goBack">返回首页</el-button>
                <el-button type="success" size="small" @click="lookEnd">查看结果</el-button>
            </div>
        </div>
	</div>
</template>
  
<script>
import aes from "@/utils/aes";
import head2 from '@/components/Head/head2.vue'
export default {
	components: { head2 },
	data() {
		return {
			countDwon: 10,
			isEnd:false,
			rightCount:0,
			leftCount:0
		}
	},
	mounted() {
		this.getColor()
		this.countDwon1()
		// this.test()
	},
	methods: {
		onceAgain(){
            this.isEnd=!this.isEnd
        },
        goBack(){
            this.$router.push("/home")
        },
        lookEnd(){
            this.isEnd=!this.isEnd
        },
		getColor() {
			const contentThis=this
			var content = document.getElementById("neirong");//获取中间内容
			var duiBtn = document.getElementById("dui");//获取对点击按钮
			var cuoBtn = document.getElementById("cuo");//获取对点击按钮
			var fangKuai = document.getElementsByClassName("fangkuai");//获取方块
			var ArrColor = ["红", "黄", "蓝", "黑", "绿", "紫"];//内容颜色数组
			var arrColor = ["red", "yellow", "blue", "black", "green", "purple"];//颜色数组
			var arrcuo = [];//统计做错的个数
			var arrdui = [];//统计做错的个数
			for (var i = 0; i < 4; i++) {//构建基本的6个内容
				var newDiv = document.createElement("div");
				var randomNumber = Math.floor(Math.random() * 6)//产生随机数
				var randomNumber2 = Math.floor(Math.random() * 6)//产生随机数
				newDiv.style.marginTop = i * 15 + "vh"
				newDiv.style.width = i * 10 + "vw";
				newDiv.style.height = i * 10 + "vw";
				newDiv.style.lineHeight = i * 10 + "vw";
				newDiv.style.fontSize = i * 20 + "px";
				newDiv.innerHTML = ArrColor[randomNumber2];
				newDiv.style.color = arrColor[randomNumber];
				newDiv.className = "fangkuai";
				newDiv.style.borderColor = arrColor[randomNumber2];
				content.appendChild(newDiv);
			}
			function zhuanhuan() {//点击好后每个列表出现
				content.removeChild(content.lastChild);
				var newdiv = document.createElement("div");
				var randomNumber = Math.floor(Math.random() * 6)//产生随机数
				var randomNumber2 = Math.floor(Math.random() * 6)//产生随机数
				newdiv.className = "fangkuai";
				newdiv.innerText = ArrColor[randomNumber2];
				newdiv.style.color = arrColor[randomNumber];
				newdiv.style.borderColor = arrColor[randomNumber2];
				content.insertBefore(newdiv, content.children[0]);
				Array.from(fangKuai).forEach((el, index) => {
					el.style.marginTop = index * 15 + "vh"
					el.style.width = index * 10 + "vw";
					el.style.height = index * 10 + "vw";
					el.style.lineHeight = index * 10 + "vw";
					el.style.fontSize = index * 20 + "px";
				})
			}

			duiBtn.onclick = function () {//正确游戏点击
				var zuo = ArrColor.indexOf(content.lastChild.innerHTML);
				var you = arrColor.indexOf(content.lastChild.style.color);
				console.log(zuo, you)
				if (zuo == you) {
					contentThis.rightCount++
				}
				else {
					contentThis.leftCount++
				}
				zhuanhuan()
			}
			cuoBtn.onclick = function () {//错误按钮点击
				var zuo = ArrColor.indexOf(content.lastChild.innerHTML);
				var you = arrColor.indexOf(content.lastChild.style.color);
				console.log(zuo, you)
				if (zuo != you) {
					contentThis.rightCount++
				}
				else {
					contentThis.leftCount++
				}
				zhuanhuan()
			}
		},
		countDwon1(){
		const timer = setInterval(() => {
        this.countDwon--;
        if (this.countDwon <= 0) {
			clearInterval(timer)
         	this.isEnd=!this.isEn
        }
      }, 1000);
		}
	}
}
</script>
  
<style lang="less">
#GameOver {
    width: 80vw;
    height: 65vh;
    background-color: rgb(218, 225, 218);
    z-index: 100;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    #endTittle {
        margin-top: 20px;
        font-size: 20px;
        letter-spacing: 1px;
        font-weight: bold;
    }
    p {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 5vh;
        letter-spacing: 2px;
		span{
			color: red;
		}
    }
    img {
        margin: 6vh auto 1vh;
        width: 90%;
        height: 30vh;
        object-fit: cover;
    }
    #btn {
        display: flex;
        justify-content: space-evenly;
        bottom: 0;
    }
}
#biaoti {
	font-size: 20px;
	color: white;
	text-align: center;
	letter-spacing: 2rem;
}

#fhbtn {
	float: left;
	width: 11vw;
	height: 6vh;
	margin-left: 4vw;
	position: absolute;
}

#jishi {
	margin-top: -3vh;
	height: 5vh;
	font-size: 20px;
	color: white;
	letter-spacing: 0.5rem;
	padding-bottom: 2vh;
	display: flex;
	justify-content: space-evenly;
}

#panduan {
	display: flex;
	justify-content: space-around;
	margin-top: 2vh;
}

#dui,
#cuo {
	width: 20vw;
	height: 20vw;
	background-color: aquamarine;
	border-radius: 50%;
	font-size: 30px;
	text-align: center;
	line-height: 20vw;
}

#neirong {
	position: relative;
	width: 95vw;
	height: 70vh;
	
	background-color: #fdc4b6;
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow: hidden;
	margin-top: -10vh;
}

.fangkuai {
	border-radius: 50%;
	background-color: white;
	position: absolute;
	text-align: center;
	font-size: 20px;
	color: blue;
	border: green 1rem solid;
}

#waiBu {
	width: 100vw;
	height: 60vh;
	overflow: hidden;
}

#over {
	background-color: #2694ab;
	position: absolute;
	top: 10vh;
	height: 75vh;
	width: 80vw;
	left: 10vw;
	color: white;
	display: none;
}

#over>p:nth-child(1) {
	text-align: center;
	font-size: 20px;
}

#over>p:nth-child(2) {
	text-align: center;
	font-size: 20px;
}

#over>span {
	font-size: 20px;
	margin-top: 10vh;
}

#anNiu {
	margin-top: 12vh;
	display: flex;
	justify-content: center;
	margin-left: -3vw;
}

#anNiu>button {
	margin-left: 2rem;
	font-size: 20px;
	height: 5.5vh;
	width: 22vw;
}

#kongge {
	height: 5vh;
}

#fen {
	font-size: 30px;
	margin: 2.5vh 25vw;
	color: red;
}

#output {
	color: #2694ab;
	width: 0.01vw;
	height: 0.01vh;
	overflow: hidden;
}

#shijian {
	color: green;
}

#bigDiv {
	height: 100vh;

	#countDown {
		font-size: 18px;
		font-weight: bold;
		letter-spacing: 2px;
		text-align: right;
		margin-bottom: 5px;
		#timeNumber {
			color: red;
		}
	}

	#bigTitle {
		font-weight: bold;
		font-size: 22px;
		margin-top: 5px;
		letter-spacing: 3px;
	}

}</style>